<template>
  <div>
    <Title2 title="校园人员流动情况"></Title2>
    <div class="right_item">
      <div class="right_item1">
        <div>
          <img src="../assets/images/yestoday.png" alt="" />
          <div class="wz">
            <p>1</p>
            <p>昨日外来访客</p>
          </div>
        </div>
        <div>
          <img src="../assets/images/today.png" alt="" />
          <div>
            <p>1</p>
            <p>今日外来访客</p>
          </div>
        </div>
      </div>
      <div class="ehcatrsbox">
        <MyEearts :option="option"></MyEearts>
      </div>
    </div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
import { getxiao } from '../../request/index'
import MyEearts from '../commont/MyEearts.vue'
import Title2 from '../commont/Title2.vue'
let option = ref({
  legend: {
    textStyle: {
      color: '#fff',
      fontSize: ''
    }
  },
  tooltip: {},
  dataset: {
    dimensions: ['product', '昨日外来访客', '今日外来访客'],
    source: [
      {
        product: '二月',
        昨日外来访客: 43.3,
        今日外来访客: 85.8
      },
      { product: '三月', 昨日外来访客: 83.1, 今日外来访客: 73.4 },
      { product: '四月', 昨日外来访客: 86.4, 今日外来访客: 65.2 },
      { product: '五月', 昨日外来访客: 72.4, 今日外来访客: 53.9 }
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  grid: {
    height: '50px' //强制Swiper的高度(px)，当你的Swiper在隐藏状态下初始化时且切换方向为垂直才用得上。这个参数会使自适应失效。
  },
  // Declare several bar series, each will be mapped
  // to a column of dataset.source by default.
  series: [
    {
      type: 'bar',
      itemStyle: {
        //柱状的圆角
        borderRadius: [20, 20, 20, 20],
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#2337f9' },
          { offset: 0.5, color: '#6c1dff' },
          { offset: 1, color: '#b004f2' }
        ])
      },
      barWidth: '20%'
    },
    {
      type: 'bar',
      itemStyle: {
        //柱状的圆角
        borderRadius: [20, 20, 20, 20],
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#3cdf8c' },
          { offset: 0.5, color: '#21bf51' },
          { offset: 1, color: '#0aa31f' }
        ])
      },
      barWidth: '20%'
    }
  ]
})
onMounted(() => {
  getxiao().then((res) => {
    // console.log(res, '访客情况')
    option.value.dataset.dimensions = res.data.data.result[0].dimensions
    option.value.dataset.source = res.data.data.result[0].source
  })
})
</script>

<style scoped lang='scss'>
.wz {
  text-align: center;
}
.right_title {
  height: 40px;
  width: 100%;
  color: #fff;
  padding-left: 10px;
  line-height: 40px;
  background: url('/src/assets/images/titlebg.png') no-repeat;
  background-size: 100% 100%;
  transform: rotateY(180deg);
}
.right_title p {
  transform: rotateY(180deg);
  padding-left: 23px;
}
.right_item {
  margin-top: 10px;
  width: 100%;
  height: 410px;
  background: #0c1d5f;
}
.right_item1 {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.right_item1 > div {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.right_item1 > div img {
  margin: 0px 20px;
}
.ehcatrsbox {
  width: 100%;
  height: 280px;
}
</style>